
//  Animated的2秒之类动画隐藏
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Animated,
    Easing,
    TouchableOpacity,
    LayoutAnimation,
    TouchableHighlight,
    ToastAndroid,
    Platform,
    UIManager
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeOutOpacity: new Animated.Value(0),
        };
    }

    componentDidMount() {
        this.startAnimation();
    }

    startAnimation() {
        this.state.fadeOutOpacity.setValue(1);
        // 在从新渲染之前要开始动画
        // 第一个参数就是他要根据变化的参数，第二个参数是动画具体执行的过程
        Animated.timing(this.state.fadeOutOpacity, {
            toValue: 0,
            duration: 2000,
            easing: Easing.ease,// 线性的渐变函数
        }).start();
    }

    render() {
        return (
            <Animated.View
                style = {[styles.container,{opacity: this.state.fadeOutOpacity}]}
            >
                <Image
                    source = {{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
                    style = {{width:100,height:100}}/>
            </Animated.View >
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});